/*
参数说明：
alertShow-弹出框参数{
    showmsg-服务器弹窗提示
    msg-服务器提示内容
    show-抽奖结果弹窗提示
}
  lottery-九宫格参数对象{
    index-当前转动到哪个位置，起点位置
    count-总共有多少个位置
    timer-setTimeout的ID，用clearTimeout清除
    speed-初始转动速度
    times-转动次数
    cycle-转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize-中奖位置
  }
  imgData-抽奖服务器图片List集合{
    giftUrl-奖品图片地址
    className-抽奖样式自定义(走马灯根据样式做的操作)
    type-判断是否是抽奖位(-1为抽奖按钮位)
  }
  index-为最终奖品的位置(样式+数字来判断)
  click-控制抽奖按钮在抽奖跑动时不可点击,跑动完成后可以点击
  lotteryName-中奖物品名字
  recordId-中奖记录Id
  imgHeight-根据手机显示率动态计算抽奖图片高度
  goGet-是否是实物 false 是虚拟 true 是实物
  方法：
    getShopList-初始化取得抽奖图片数据等
    bodyfn-在页面完成渲染后做图片设配操作
    luckTypefn-分享、积分兑换次数、逻辑方法
    luckbuttnFn-抽奖按钮事件
    luckfn-抽奖逻辑方法体
    onShow-弹窗框弹出时触发的方法
    onHide-弹窗框关闭时触发的方法
*/
<template>
  <div  id="lottery" >
    <div v-if="click===true" class="zhezhao"></div>
    <alert v-model="alertShow.show" :title="'抽奖结果'" @on-show="onShow" @on-hide="onHide">{{lotteryName}}</alert>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <masker :style="maskStyle" :opacity="0.8" v-if="isMasker === true" fullscreen>
      <div slot="content" class="m-title" v-if="isMasker === true">
        <div style="width: 100%;">
          <icon type="cancel" style="display: inline-block;float: left;margin-left: 15px;" @click.native="cancelMask"></icon>
          <img src="../../../assets/images/user/jiantou.png" alt="邀请有奖" style=""><span>&nbsp;&nbsp;</span>
        </div>
        <p style="width: 50%;margin: 0 auto;">请点击右上角分享，邀请好友使用孝行通</p>
        <x-button type="primary" @click.native="cancelMask" action-type="button" style="width: 100px;margin-top: 30px;background: rgba(0,0,0,0);font-size: 15px;border: 1px solid white;">知道了</x-button>
      </div>
    </masker>
    </flexbox-item>
    <img src="../../../assets/images/activities/choujiangBanner.png" style="width:100%;display:block"/>
    <div class="flexBg">
      <flexbox :gutter="0" wrap="wrap" justify="center">
        <flexbox-item :span="0.29" v-for="item in imgData">
          <div :class="item.className" >
            <img :src="item.giftUrl" @click="luckTypefn(item.type)" :width="imgHeight" :height="imgHeight">
            <div class="mask" >
              <img src="../../../../static/images/mask.png" :width="imgHeight" :height="imgHeight">
            </div>
          </div>
        </flexbox-item>
      </flexbox>
      <swiper auto height="90px" direction="vertical" :interval=3000 class="text-scroll" :show-dots="false" style="text-align: center;margin-top: 20px;">
        <swiper-item v-if="luck1===true" style="margin-top: 20px;">
          <p v-for="item in luckArry1" style="font-size: 12px;color: #ffffff">
            <span style="display: inline-block;vertical-align: bottom;margin: 0;padding:0;white-space: nowrap;width:80px;overflow: hidden;text-overflow: ellipsis;">{{item.userName}}</span>
            <span>({{item.mobile}})</span>
            <span>抽中了{{item.name}}</span>
          </p>
        </swiper-item>
        <swiper-item v-if="luck2===true" style="margin-top: 20px;">
          <p v-for="item in luckArry2" style="font-size: 12px;color: #ffffff">
            <span style="display: inline-block;vertical-align: bottom;white-space: nowrap;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{item.userName}}</span>
            <span style="display: inline-block;">({{item.mobile}})</span>
            <span style="display: inline-block;">抽中了{{item.name}}</span>
          </p>
        </swiper-item>
        <swiper-item v-if="luck3===true" style="margin-top: 20px;">
          <p v-for="item in luckArry3" style="font-size: 12px;color: #ffffff">
            <span style="display: inline-block;vertical-align: bottom;white-space: nowrap;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{item.userName}}</span>
            <span style="display: inline-block;">({{item.mobile}})</span>
            <span style="display: inline-block;">抽中了{{item.name}}</span>
          </p>
        </swiper-item>
        <swiper-item v-if="luck4===true" style="margin-top: 20px;">
          <p v-for="item in luckArry4" style="font-size: 12px;color: #ffffff">
            <span style="display: inline-block;vertical-align: bottom;white-space: nowrap;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{item.userName}}</span>
            <span style="display: inline-block;">({{item.mobile}})</span>
            <span style="display: inline-block;">抽中了{{item.name}}</span>
          </p>
        </swiper-item>
        <swiper-item v-if="luck5===true" style="margin-top: 20px;">
          <p v-for="item in luckArry5" style="font-size: 12px;color: #ffffff">
            <span style="display: inline-block;vertical-align: bottom;white-space: nowrap;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{item.userName}}</span>
            <span style="display: inline-block;">({{item.mobile}})</span>
            <span style="display: inline-block;">抽中了{{item.name}}</span>
          </p>
        </swiper-item>
        <swiper-item v-if="luck6===true" style="margin-top: 20px;">
          <p v-for="item in luckArry6" style="font-size: 12px;color: #ffffff">
            <span style="display: inline-block;vertical-align: bottom;white-space: nowrap;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{item.userName}}</span>
            <span style="display: inline-block;">({{item.mobile}})</span>
            <span style="display: inline-block;">抽中了{{item.name}}</span>
          </p>
        </swiper-item>
        <swiper-item v-if="luck7===true" style="margin-top: 20px;">
          <p v-for="item in luckArry7" style="font-size: 12px;color: #ffffff">
            <span style="display: inline-block;vertical-align: bottom;white-space: nowrap;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{item.userName}}</span>
            <span style="display: inline-block;">({{item.mobile}})</span>
            <span style="display: inline-block;">抽中了{{item.name}}</span>
          </p>
        </swiper-item>
        <swiper-item v-if="luck8===true" style="margin-top: 20px;">
          <p v-for="item in luckArry8" style="font-size: 12px;color: #ffffff">
            <span style="display: inline-block;vertical-align: bottom;white-space: nowrap;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{item.userName}}</span>
            <span style="display: inline-block;">({{item.mobile}})</span>
            <span style="display: inline-block;">抽中了{{item.name}}</span>
          </p>
        </swiper-item>
        <swiper-item v-if="luck9===true" style="margin-top: 20px;">
          <p v-for="item in luckArry9" style="font-size: 12px;color: #ffffff">
            <span style="display: inline-block;vertical-align: bottom;white-space: nowrap;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{item.userName}}</span>
            <span style="display: inline-block;">({{item.mobile}})</span>
            <span style="display: inline-block;">抽中了{{item.name}}</span>
          </p>
        </swiper-item>
        <swiper-item v-if="luck10===true" style="margin-top: 20px;">
          <p v-for="item in luckArry10" style="font-size: 12px;color: #ffffff">
            <span style="display: inline-block;vertical-align: bottom;white-space: nowrap;width: 80px;overflow: hidden;text-overflow: ellipsis;">{{item.userName}}</span>
            <span style="display: inline-block;">({{item.mobile}})</span>
            <span style="display: inline-block;">抽中了{{item.name}}</span>
          </p>
        </swiper-item>
      </swiper>
      <div style="padding: 22px 20px 22px 10px;color: white;">
        <divider style="color: #ffff17 !important;padding-top: 80px">活动规则</divider>
        <p style="font-size: 12px">1.用户关注微信公众号后，均可参与抽奖</p>
        <p style="font-size: 12px">2.每个用户每天可免费抽奖2次</p>
        <p style="font-size: 12px">3.每天每个用户可用积分兑换3次抽奖机会，每次消耗5积分</p>
        <p style="font-size: 12px">4.分享抽奖结果至朋友圈可额外获得一次抽奖机会(每人每天仅可获取一次)</p>
      </div>
    </div>

    <!--<div style="padding-right:30px;padding-left:30px;padding-top:30px;">-->
      <!--<x-button  @click.native="recordFn" type="primary">我的中奖纪录</x-button>-->
    <!--</div>-->
  </div>
</template>
<script>
  import { Flexbox, FlexboxItem, Alert, XButton, Divider, Masker, Icon, Swiper, SwiperItem } from 'vux'
  import $ from 'jquery'
  import * as urls from '../../../api/urls'
  import * as types from '../../../store/types'
  import Vue from 'vue'

  export default {
    components: {
      Flexbox,
      FlexboxItem,
      Alert,
      XButton,
      Divider,
      Masker,
      Icon,
      Swiper,
      SwiperItem
    },
    mounted: function () {
      let that = this
      this.activityId = this.$route.query.activityId
      this.maskStyle = 'width:100%;position: absolute;z-index: 9999;height: ' + (document.body.clientHeight) + 'px;'
      if (this.$store.state.userInfo.id === '' || this.$store.state.userInfo.id === null || this.$store.state.userInfo.id === undefined) {
        this.userId = window.location.href.replace(/.*userId=(\w*)&?.*/, '$1')
        let id = window.location.href.replace(/.*id=(\w*)&?.*/, '$1')
        this.activityId = id
        if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
          console.log('测试下抽奖')
          this.$store.commit(types.USER_INFO, {id: this.userId})
          // this.getLuckInfodata()
          this.getShopList()
        } else {
          let url = window.location.origin
          window.location.href = url + '/api/wxAuth/index?type=t3&id=' + that.activityId
        }
      } else {
        this.userId = this.$store.state.userInfo.id
        // this.getLuckInfodata()
        this.getShopList()
      }
      let empower = this.$store.state.empower.type
      if (empower === true) {
        console.log('授权开')
      } else {
        console.log('授权关')
      }
      this.weixinfn44()
    },
    data () {
      return {
        luck1: false,
        luck2: false,
        luck3: false,
        luck4: false,
        luck5: false,
        luck6: false,
        luck7: false,
        luck8: false,
        luck9: false,
        luck10: false,
        luckArry1: [],
        luckArry2: [],
        luckArry3: [],
        luckArry4: [],
        luckArry5: [],
        luckArry6: [],
        luckArry7: [],
        luckArry8: [],
        luckArry9: [],
        luckArry10: [],
        userId: '',
        isMasker: false,
        maskStyle: 'height: 300px;width:100%;position: absolute;',
        alertShow: {
          showmsg: false,
          show: false,
          msg: ''
        },
        activityId: '',
        luckQ: 1,
        imgHeight: '',
        lotteryName: '',
        recordId: '',
        goGet: false,
        index: '',
        click: false,
        currentPage: '1',
        pageSize: '100',
        formData: '',
        imgData: [{
          giftUrl: '',
          className: '',
          type: ''
        }],
        url: '',
        lottery: {
          index: -1,
          count: 0,
          timer: 0,
          speed: 20,
          times: 0,
          cycle: 50,
          prize: -1,
          init: function (id) {
            if ($('#' + id).find('.lottery-unit').length > 0) {
              let $lottery = $('#' + id)
              let $units = $lottery.find('.lottery-unit')
              this.obj = $lottery
              this.count = $units.length
              $lottery.find('.lottery-unit-' + this.index).addClass('active')
            }
          },
          roll: function () {
            var index = this.index
            var count = this.count
            var lottery = this.obj
            $(lottery).find('.lottery-unit-' + index).removeClass('active')
            index += 1
            if (index >= count - 1) {
              index = 0
            }
            $(lottery).find('.lottery-unit-' + index).addClass('active')
            this.index = index
            return false
          },
          stop: function (index) {
            this.prize = index
            return false
          }
        }
      }
    },
    methods: {
      weixinfn44 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      },
      getLuckInfodata () {
        let that = this
        this.http(urls.lotteryRecord, {activityId: that.activityId, currentPage: this.currentPage, pageSize: this.pageSize}, function (res) {
          if (res.status === 100) {
            if (res.data.page.list.length !== 0) {
              let Arry = res.data.page.list
              for (let i = 0; i < Arry.length; i++) {
                let dataObj = {}
                dataObj.name = Arry[i].userName + '(' + Arry[i].mobile + ')抽中' + Arry[i].name
                that.luckArryA.push(dataObj)
              }
              console.log(that.luckArryA)
              that.luckA = true
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      cancelMask () {
        this.isMasker = false
        document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'auto'
        this.maskStyle = 'width:100%;position: absolute;z-index: 0;height: ' + (document.body.clientHeight) + 'px;'
      },
      userInvitation () {
        this.isMasker = true
        document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'hidden'
        this.maskStyle = 'width:100%;position: absolute;z-index: 9999;height: ' + (document.body.clientHeight) + 'px;'
      },
      getShopList () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.luckIndex, {userId: userId, activityId: that.activityId}, function (res) {
          if (res.status === 100) {
            if (res.data !== undefined) {
              that.url = res.data.url
              if (res.data.lotteryRecords1 !== undefined) {
                that.luckArry1 = res.data.lotteryRecords1
                that.luck1 = true
              }
              if (res.data.lotteryRecords2 !== undefined) {
                that.luckArry2 = res.data.lotteryRecords2
                that.luck2 = true
              }
              if (res.data.lotteryRecords3 !== undefined) {
                that.luckArry3 = res.data.lotteryRecords3
                that.luck3 = true
              }
              if (res.data.lotteryRecords4 !== undefined) {
                that.luckArry4 = res.data.lotteryRecords4
                that.luck4 = true
              }
              if (res.data.lotteryRecords5 !== undefined) {
                that.luckArry5 = res.data.lotteryRecords5
                that.luck5 = true
              }
              if (res.data.lotteryRecords6 !== undefined) {
                that.luckArry6 = res.data.lotteryRecords6
                that.luck6 = true
              }
              if (res.data.lotteryRecords7 !== undefined) {
                that.luckArry7 = res.data.lotteryRecords7
                that.luck7 = true
              }
              if (res.data.lotteryRecords8 !== undefined) {
                that.luckArry8 = res.data.lotteryRecords8
                that.luck8 = true
              }
              if (res.data.lotteryRecords9 !== undefined) {
                that.luckArry9 = res.data.lotteryRecords9
                that.luck9 = true
              }
              if (res.data.lotteryRecords10 !== undefined) {
                that.luckArry10 = res.data.lotteryRecords10
                that.luck10 = true
              }
              if (res.data.lotters.length !== 0) {
                that.imgData = res.data.lotters
                for (let i = 0; i < that.imgData.length; i++) {
                  let className
                  if (that.imgData[i].type === -1) {
                    className = 'flex-demo lottery-unit'
                    that.imgData[i].className = className
                    that.imgData[i].giftUrl = '../../../../static/images/choujiangButtion.png'
                  } else {
                    switch (i) {
                      case 0:
                        className = 'flex-demo lottery-unit lottery-unit-0'
                        break
                      case 1:
                        className = 'flex-demo lottery-unit lottery-unit-1'
                        break
                      case 2:
                        className = 'flex-demo lottery-unit lottery-unit-2'
                        break
                      case 3:
                        className = 'flex-demo lottery-unit lottery-unit-7'
                        break
                      case 5:
                        className = 'flex-demo lottery-unit lottery-unit-3'
                        break
                      case 6:
                        className = 'flex-demo lottery-unit lottery-unit-6'
                        break
                      case 7:
                        className = 'flex-demo lottery-unit lottery-unit-5'
                        break
                      case 8:
                        className = 'flex-demo lottery-unit lottery-unit-4'
                        break
                      default:
                        className = 'flex-demo lottery-unit'
                    }
                    that.imgData[i].className = className
                    that.imgData[i].type = 0
                  }
                }
              }
            }
            Vue.nextTick(function () {
              // nextTick在页面渲染完成后做屏幕图片适配问题
              that.bodyfn()
            })
          } else {
//            that.alertShow.showmsg = true
//            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
//          that.alertShow.showmsg = true
//          that.alertShow.msg = res
        })
      },
      bodyfn () {
        // 对抽奖图片做屏率适配
        let width = document.body.clientWidth
        this.imgHeight = (parseInt(width) * 0.3) + 'px'
        document.getElementsByClassName('flex-demo')[0].style.height = this.imgHeight
        document.getElementsByClassName('flex-demo')[0].style.width = this.imgHeight
      },
      luckTypefn (type) {
        let that = this
        if (type === -1) {
          that.luckbuttnFn()
        }
      },
      luckbuttnFn () {
        // lotteryId 中奖Id位置
        let userId = this.$store.state.userInfo.id
        if (this.click) {
          return false
        } else {
          let that = this
          this.http(urls.luckDraw, {userId: userId, activityId: that.activityId}, function (res) {
            console.log('抽奖点击数据', res)
            if (res.status === 100) {
              if (res.data !== undefined) {
                that.lotteryName = res.data.lotteryName
                that.recordId = res.data.recordId
                that.goGet = res.data.goGet
                for (let i = 0; i < that.imgData.length; i++) {
                  if (that.imgData[i].id === res.data.lotteryId) {
                    that.index = i
                  }
                }
                that.click = true
                that.lottery.init('lottery')
                that.speed = 100
                that.luckfn()
                return false
              }
            } else if (res.status === 500) {
              if (res.data.canBuy === true) {
                let showText = '需要使用' + res.data.cost + '积分，换取' + res.data.buyTimes + '次抽奖机会。是否继续？'
                that.$vux.confirm.show({
                  title: '提示',
                  content: showText,
                  confirmText: '是',
                  onConfirm () {
                    let userId = that.$store.state.userInfo.id
                    that.http(urls.buyTime, {userId: userId, activityId: that.activityId}, function (res) {
                      if (res.status === 100) {
                      } else {
                        that.alertShow.showmsg = true
                        that.alertShow.msg = res.errMsg
                      }
                    }, function (res) {
                      that.alertShow.showmsg = true
                      that.alertShow.msg = res
                    })
                  }
                })
              } else {
                that.alertShow.showmsg = true
                that.alertShow.msg = res.errMsg
              }
//              if (res.data.canShare === true) {
//                that.$vux.confirm.show({
//                  title: '提示',
//                  content: '今日抽奖机会已用完，将抽奖结果分享至朋友圈可额外获得一次抽奖机会',
//                  confirmText: '立即分享',
//                  onConfirm () {
//                    this.isMasker = true
//                  }
//                })
//              } else {
//
//              }
            } else {
              that.alertShow.showmsg = true
              that.alertShow.msg = res.errMsg
            }
          }, function (res) {
            that.alertShow.showmsg = true
            that.alertShow.msg = res
          })
        }
      },
      luckfn () {
        let that = this
        // 抽奖转动逻辑
        this.lottery.times += 1
        this.lottery.roll()
        if (this.lottery.times > this.lottery.cycle + 10 && this.lottery.prize === this.lottery.index) {
          clearTimeout(this.lottery.timer)
          this.lottery.prize = -1
          this.lottery.times = 0
          this.click = false
          this.lottery.speed = 40
          if (that.goGet === true) {
            this.$vux.alert.show({
              title: '提示',
              content: that.lotteryName,
              buttonText: '领取商品',
              onShow () {
              },
              onHide () {
                that.$store.commit(types.EMPOWER, {addressLuckType: true})
                that.$router.push({
                  path: '/shoppingCar/SelectAddress',
                  query: {
                    recordId: that.recordId
                  }
                })
                that.$router.go(1)
              }
            })
          } else {
            that.alertShow.show = true
          }
          console.log('抽奖结束慢动作结束')
        } else {
          if (this.lottery.times < this.lottery.cycle) {
            this.lottery.speed -= 10
          } else if (this.lottery.times === this.lottery.cycle) {
//            var index = Math.random() * (this.lottery.count - 1) | 0
//            console.log('中奖率', Math.random())
//            console.log('中奖位置', index)
            console.log('中奖位置', this.index)
            this.lottery.prize = this.index
            console.log('快速旋转结束')
          } else {
            if (this.lottery.times > this.lottery.cycle + 10 && ((this.lottery.prize === 0 && this.lottery.index === 7) || this.lottery.prize === this.lottery.index + 1)) {
              this.lottery.speed += 110
            } else {
              this.lottery.speed += 20
            }
          }
          if (this.lottery.speed < 40) {
            this.lottery.speed = 40
          }
          this.lottery.timer = setTimeout(this.luckfn, this.lottery.speed)
        }
        return false
      },
      recordFn () {
        this.$router.push({
          path: '/activities/luckRecode'
        })
        this.$router.go(1)
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      fenxiangFn () {
//        if (typeof window.WeixinJSBridge === 'undefined') {
//          $(document).on('WeixinJSBridgeReady', function () {
//            window.WeixinJSBridge.on('menu:share:appmessage', function (argv) {
//              window.WeixinJSBridge.invoke('sendAppMessage', {
//                'appid': '', // appid 设置空就好了。
//                'img_url': 'http://s1.dwstatic.com/group1/M00/D1/88/638e65068842b06485efc2de7244919a.gif', // 分享时所带的图片路径
//                'img_width': '120', // 图片宽度
//                'img_height': '120', // 图片高度
//                'link': 'www.baidu.com', // 分享附带链接地址
//                'desc': '我是一个介绍', // 分享内容介绍
//                'title': '标题，再简单不过了。'
//              }, function (res) {
//              })
//            })
//          })
//        } else {
//          $('#weiXinPay').click()
//        }
//        if ( typeof window.WeixinJSBridge === 'undefined') {
//          WeixinJSBridge.on('menu:share:appmessage', function (argv) {
//            WeixinJSBridge.invoke('sendAppMessage', {
//              'appid': '', // appid 设置空就好了。
//              'img_url': 'http://s1.dwstatic.com/group1/M00/D1/88/638e65068842b06485efc2de7244919a.gif', // 分享时所带的图片路径
//              'img_width': '120', // 图片宽度
//              'img_height': '120', // 图片高度
//              'link': 'www.baidu.com', // 分享附带链接地址
//              'desc': '我是一个介绍', // 分享内容介绍
//              'title': '标题，再简单不过了。'
//            }, function (res) {
//            })
//          })
//        }
      }
    }
  }
</script>
<style scoped="scoped">
  .mask {
    width:100%;
    position:absolute;
    left:0;
    top:0;
    display:none;
  }
  .lottery-unit{position:relative;text-align:center;color:#333;font-index:-999}
  .lottery-unit img{display:block;}
  .lottery-unit.active .mask{display:block;}
  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #fff;
    border-radius: 4px;
    width: 100%;
    background-clip: padding-box;
  }
  .flex-demo img {
    width: 100%;
  }
  .zhezhao{
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #000 none repeat scroll 0% 0%;
  }
  .flexBg{
    background: url("../../../assets/images/activities/choujiangInfo.png") no-repeat;
    background-size: 100% 100%;
    overflow-x: hidden;
  }
</style>
